<template>
    <div class="mainNav">
        <router-link class="nav" to="/home" tag="a" active-class="avtive">主页</router-link>
        <router-link class="nav" to="/exmple" tag="a" active-class="avtive">示例</router-link>
        <router-link class="nav" to="/manage" tag="a" active-class="avtive">管理</router-link>
    </div>
</template>
<script>

export default {

}
</script>
<style lang='scss' scoped>
.mainNav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >.nav {
        color: black;
        font-size: 18px;
        font-family: "webfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    >.nav.avtive {
        color: green;
    }

    >.nav:not(:last-child) {
        margin-right: 12px;
    }


}
</style>